import React, { Component } from 'react';
import
{
    Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial
    , Mesh, SphereGeometry
} from 'three';
import { WEBGL } from '../../assets/Check.js';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { Button } from 'antd';

@observer
export default class demo01 extends Component<{}, any>
{
    @observable private myDemo = document.getElementById("demo01") as HTMLDivElement;

    @observable scene = new Scene();

    @observable camera = new PerspectiveCamera(
        75, //视野角度
        this.myDemo.offsetWidth / this.myDemo.offsetHeight, //长宽比
        0.1, //近截面
        1000 //远截面 超出远截面或小于近截面就不渲染
    );

    @observable renderer = new WebGLRenderer();
    @observable geometry = new BoxGeometry();
    @observable material = new MeshBasicMaterial({ color: 0x00ff00 });
    @observable cube = new Mesh(this.geometry, this.material);

    @action
    animate = () =>
    {
        requestAnimationFrame(this.animate);
        this.cube.rotation.x += 0.01;
        this.cube.rotation.y += 0.01;

        this.renderer.render(this.scene, this.camera);
    };
    @action
    circle = () =>
    {
        this.scene.remove(this.cube);
        let geometry = new SphereGeometry(
            0.5,
            30,
            30
        );
        let material = new MeshBasicMaterial({
            color: 0xff0000,
            wireframe: true,
        });
        let myCircle = new Mesh(geometry, material);
        this.scene.add(myCircle);
        this.animate();
    };
    @action
    onMouseDown = (e: any) =>
    {
        console.log(e);
    };
    componentDidMount()
    {
        this.renderer.setSize(this.myDemo.offsetWidth, this.myDemo.offsetHeight);
        this.myDemo.appendChild(this.renderer.domElement);

        this.scene.add(this.cube);
        this.camera.position.z = 5;

        WEBGL.isWebGLAvailable() ? this.animate() : console.error("Browser is not support");
    }

    render()
    {
        return (
            <div>
                <div
                    id="demo01"
                    style={{ width: "800px", height: "800px", display: 'inline-block' }}
                    onMouseDown={this.onMouseDown}
                >
                </div>
                <ul style={{ float: 'left' }}>
                    <li>
                        <Button onClick={this.circle}>圆</Button>
                    </li>
                </ul>
            </div>
        );
    }
}
